.@{tooltip-prefix-cls} {
    .effect() {
      animation-duration: 0.3s;
      animation-fill-mode: both;
    }
  
    &&-zoom-appear,
    &&-zoom-enter {
      opacity: 0;
    }
  
    &&-zoom-enter, &&-zoom-leave {
      display: block;
    }
  
    &-zoom-enter, &-zoom-appear {
      opacity: 0;
      .effect();
      animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
      animation-play-state: paused;
    }
  
    &-zoom-leave {
      .effect();
      animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
      animation-play-state: paused;
    }
  
    &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
      animation-name: rcToolTipZoomIn;
      animation-play-state: running;
    }
  
    &-zoom-leave&-zoom-leave-active {
      animation-name: rcToolTipZoomOut;
      animation-play-state: running;
    }
  
    @keyframes rcToolTipZoomIn {
      0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0, 0);
      }
      100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1, 1);
      }
    }
    @keyframes rcToolTipZoomOut {
      0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1, 1);
      }
      100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0, 0);
      }
    }
  }